<template>
  <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
    :data-source="arr" :pagination="false">
    <!-- 自定义内容 -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <span style="color:#65befc ;">
          <clock-circle-outlined />
          {{ record.name }}
        </span>
      </template>
      <template v-else-if="column.key === 'block'">
        <span>
          {{ record.block }}
        </span>
      </template>
      <template v-else-if="column.key === 'type'">
        <span style="color:#ffd457 ;">
          {{ typeObj[record.type] }}
        </span>
      </template>
      <template v-else-if="column.key === 'Vipname'">
        <span>
          {{ record.Vipname }}
        </span>
      </template>
      <template v-else-if="column.key === 'number'">
        <span>
          {{ record.number }}
        </span>
      </template>
      <template v-else-if="column.key === 'consume'">
        <span>
          {{ record.consume }}
        </span>
      </template>
      <template v-else-if="column.key === 'balance'">
        <span>
          {{ record.balance }}
        </span>
      </template>
      <template v-else-if="column.key === 'save'">
        <span>
          {{ record.save }}
        </span>
      </template>
      <template v-else-if="column.key === 'score'">
        <span>
          {{ record.score }}
        </span>
      </template>
      <template v-else-if="column.key === 'begin'">
        <span>
          {{ record.begin }}
        </span>
      </template>
      <template v-else-if="column.key === 'over'">
        <span>
          {{ record.over }}
        </span>
      </template>
      <template v-else-if="column.key === 'Vipstate'">
        <span style="color: #45d585;">
          <a-switch v-model:checked="record.Vipstate" >
            <template #checkedChildren><check-outlined /></template>
            <template #unCheckedChildren><close-outlined /></template>
          </a-switch>
        </span>
      </template>
      <template v-else-if="column.key === 'operation'">
        <span style="color:#979def ;" @click="del">
             操作
        </span>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, ref, toRaw,watchEffect, onMounted,onBeforeUnmount } from 'vue';
import { SmileOutlined, ClockCircleOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { MockListDel,MockListDelAll } from '../../../api/VipApi'
import Bus from '@/mitt/index'
type Key = string | number;
interface DataType {
  key: Key;
  name: number;
  block: number,
  type: string,
  Vipname: string,
  grade: string,
  number: string,
  consume: string,
  balance: string,
  save: string,
  score: string,
  begin: any,
  over: string,
}
/* 会员类型的调整 */
interface typeObj {
  [key: number]: any
}
const columns = [
  {
    title: '序号',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '卡号',
    dataIndex: 'block',
    key: 'block'
  },
  {
    title: '会员类型',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: '会员等级',
    dataIndex: 'grade',
    key: 'grade'
  },
  {
    title: '会员姓名',
    dataIndex: 'Vipname',
    key: 'Vipname'
  },
  {
    title: '手机号码',
    dataIndex: 'number',
    key: 'number'
  },
  {
    title: '累计消费',
    dataIndex: "consume",
    key: 'consume'
  },
  {
    title: '储存余额',
    dataIndex: 'balance',
    key: 'balance'
  },
  {
    title: '累计储值',
    dataIndex: 'save',
    key: 'nsaveame'
  },
  {
    title: '积分',
    dataIndex: 'score',
    key: 'score'
  },
  {
    title: '开卡时间',
    dataIndex: 'begin',
    key: 'begin'
  },
  {
    title: '到期时间',
    dataIndex: 'over',
    key: 'over'
  },
  {
    title: '会员状态',
    dataIndex: 'Vipstate',
    key: 'Vipstate'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation'
  },
];

const data: DataType[] = [];
for (let i = 0; i < 5; i++) {
  data.push({
    key: 1,
    name: 1,
    block: 1123123,
    type: '普通会员',
    grade: 'VIP',
    Vipname: '姓名1',
    number: '123123123',
    consume: '123.90',
    balance: '123123.0',
    save: '132321.0',
    score: '1000',
    begin: '2019-110-1',
    over: '2020-10-1',

  });
}

export default defineComponent({
  components: {
    SmileOutlined,
    ClockCircleOutlined,
    CheckOutlined, CloseOutlined
  },
  props: ['arr'],
  setup(props, ctx) {
    const checked = ref<boolean>(true);
    const typeObj: typeObj = {
      0: "普通会员",
      1: '中级会员',
      2: "高级会员"
    }
    //会员状态的调整
    const state = reactive<{
      selectedRowKeys: Key[];
      loading: boolean;
    }>({
      selectedRowKeys: [],
      loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);
    //会员类型的调整
    const Vipstat = reactive({
      checked1: false,
    });

    const start = () => {
      state.loading = true;
      setTimeout(() => {
        state.loading = false;
        state.selectedRowKeys = [];
      }, 1000);
    };
    const onSelectChange = (selectedRowKeys: Key[]) => {
      state.selectedRowKeys = selectedRowKeys;
      console.log('selectedRowKeys changed: ', selectedRowKeys);
    };
    //删除
    const del = (id: any) => {
      Bus.emit('del')
      setTimeout(() => {
        MockListDel({ id: id }).then((res: any) => {
        console.log(res);
        if (res.code == 200) {
          ctx.emit('MockListDel')
        }
      })
      }, 2000);
    }
    //批量删除
    const delAlls =()=>{
      console.log('state.selectedRowKeys',state.selectedRowKeys);
      MockListDelAll({ids:state.selectedRowKeys}).then((res:any)=>{
         console.log('resss',res);
         if(res.code == 200){
           ctx.emit('ResListDelAll');
         }
      })
    }
    onMounted(()=>{
      Bus.on('delAll',delAlls)
    })
    onBeforeUnmount(()=>{
       Bus.off('delAll',delAlls)
    })
    return {
      data,
      columns,
      hasSelected,
      ...toRefs(state),
      start,
      onSelectChange,
      checked,
      del,
      typeObj,
      ...toRefs(Vipstat),
    };
  },
});
</script>
<style scoped lang="less">
 .ant-table-cell{
   text-align: center;
 }
</style>